<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-pro-checkcard ant-pro-checkcard-bordered"
      style="width: 200px; height: 200px;"
    >
      <div
        class="ant-pro-checkcard-content"
      >
        <div
          class="ant-pro-checkcard-detail"
        >
          <div
            class="ant-pro-checkcard-header"
          >
            <div
              class="ant-pro-checkcard-header-left"
            >
              <div
                class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
              >
                Card title
              </div>
            </div>
          </div>
          <div
            class="ant-pro-checkcard-description"
          >
            This is the description
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard 自定义样式说明：
      </h4>
      <ul>
        <li>
          <strong>
            style
          </strong>
          : 自定义样式对象，可以覆盖默认样式
        </li>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
        <li>
          <strong>
            description
          </strong>
          : 卡片描述信息
        </li>
      </ul>
      <h4>
        Style 属性说明：
      </h4>
      <ul>
        <li>
          <strong>
            width
          </strong>
          : 卡片宽度，可以是数字（像素）或字符串
        </li>
        <li>
          <strong>
            height
          </strong>
          : 卡片高度，可以是数字（像素）或字符串
        </li>
        <li>
          <strong>
            backgroundColor
          </strong>
          : 背景颜色
        </li>
        <li>
          <strong>
            border
          </strong>
          : 边框样式
        </li>
        <li>
          <strong>
            borderRadius
          </strong>
          : 圆角半径
        </li>
        <li>
          <strong>
            padding
          </strong>
          : 内边距
        </li>
        <li>
          <strong>
            margin
          </strong>
          : 外边距
        </li>
      </ul>
      <h4>
        自定义样式特点：
      </h4>
      <ul>
        <li>
          <strong>
            优先级
          </strong>
          : style 属性会覆盖组件的默认样式
        </li>
        <li>
          <strong>
            响应式
          </strong>
          : 可以使用媒体查询实现响应式样式
        </li>
        <li>
          <strong>
            主题适配
          </strong>
          : 可以结合 CSS 变量实现主题切换
        </li>
        <li>
          <strong>
            灵活控制
          </strong>
          : 可以精确控制卡片的尺寸和外观
        </li>
      </ul>
      <h4>
        使用建议：
      </h4>
      <ul>
        <li>
          <strong>
            固定尺寸
          </strong>
          : 使用 width 和 height 设置固定尺寸
        </li>
        <li>
          <strong>
            百分比布局
          </strong>
          : 使用百分比值实现响应式布局
        </li>
        <li>
          <strong>
            主题定制
          </strong>
          : 结合 CSS 变量实现主题定制
        </li>
        <li>
          <strong>
            动画效果
          </strong>
          : 可以添加 transition 等动画效果
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>